<template>
	<div style="padding-left: 0.1rem;padding-right: 0.1rem; height: 100%;">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<el-row :gutter="5">
					<el-col :span="5">
						<h2 style="padding-top: 0.5rem;"><span
								style="color:#ffff00;text-shadow:0 0 1px #00aeef">科室详细信息总览</span></h2>
					</el-col>
					<el-col :span="3" :offset="12">
						<el-button type="primary" @click="adddoctor()">新增科室<i class="el-icon-plus el-icon--right"></i>
						</el-button>
					</el-col>
					<el-col :span="4">
						<el-tooltip class="item" effect="light" content="科室名" placement="top-start">
							<el-input v-model="search" suffix-icon="el-icon-search" placeholder="输入关键字搜索" />
						</el-tooltip>
					</el-col>
				</el-row>
			</div>
			<div>
				<el-row :gutter="10">
					<el-col style="padding-top: 1.5625rem;" :span="9">
						<el-form border ref="form" :model="editroomData" label-width="80px">
							<el-row :gutter="20">
								<el-col :span="12">
									<el-form-item label="科室编号">
										<el-input readonly v-model="editroomData.roomID"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="科室名">
										<el-input :readonly="ableChange" v-model="editroomData.roomName"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="12">
									<el-form-item label="主管人员">
										<el-input :readonly="ableChange" v-model="editroomData.Supervisor"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="成员数量">
										<el-input :readonly="ableChange" v-model="editroomData.mumberNum"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="20">
								<el-col :span="12">
									<el-form-item label="联系电话">
										<el-input :readonly="ableChange" v-model="editroomData.phone"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="建立日期">
										<el-input :readonly="ableChange" v-model="editroomData.setupTime"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-form-item label="科室介绍">
								<el-input :readonly="ableChange" type="textarea" :rows="7"
									v-model="editroomData.induction"></el-input>
							</el-form-item>
							<el-row :gutter="20">
								<el-col :span="4" :offset="8">
									<el-button type="info" @click="adddoctor()">取消
									</el-button>
								</el-col>
								<el-col :span="4">
									<el-button type="primary" @click="save()">保存
									</el-button>
								</el-col>
							</el-row>

						</el-form>
					</el-col>
					<el-col :span="15">
						<el-table @row-click="ShowRowClick" script ref="filterTable multipleTable" :data="roomData.filter(data => !search
							||data.roomName.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
							<el-table-column prop="roomID" align="center" label="科室编号" width="80">
							</el-table-column>
							<el-table-column prop="roomName" align="center" label="科室名" width="75">
							</el-table-column>
							<el-table-column prop="Supervisor" align="center" label="主管人员" width="80">
							</el-table-column>
							<el-table-column prop="phone" align="center" label="联系电话" width="120">
							</el-table-column>
							<el-table-column prop="setupTime" align="center" label="建立日期" width="110">
							</el-table-column>
							<el-table-column prop="mumberNum" align="center" label="成员数量" width="80">
							</el-table-column>
							<!-- 编辑科室信息和删除医生信息 -->
							<el-table-column prop="" align="center" label="操作" width="140">
								<!-- 编辑和删除操作 -->
								<template slot-scope="scope">
									<el-button type="primary" size="mini"
										@click.native.prevent="editdoctor(scope.$index, table)" icon="el-icon-edit">
									</el-button>
									<el-button type="danger" size="mini"
										@click.native.prevent="deleteRow(scope.$index, table)" icon="el-icon-delete">
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</div>
		</el-card>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				value: '',

				ableChange: true,
				visible: true,
				activeName: '科室管理',
				search: '',
				idex: 0,
				roomData: {
					roomID: '',
					roomName: '',
					Supervisor: '',
					phone: '',
					setupTime: '',
					mumberNum: '',
					induction: ''
				},
				editroomData: {
					roomID: '',
					roomName: '',
					Supervisor: '',
					phone: '',
					setupTime: '',
					mumberNum: '',
					induction: ''
				}


			};
		},
		mounted: function() {
			this.$axios.get('http://localhost:8080/KSGL_Information.json').then((result) => {
				//console.log(result.data);
				this.roomData = result.data
			}).catch((err) => {
				console.log(err);
			});
		},
		methods: {
			ShowRowClick(val) {
				let thisRowData = this;
				thisRowData = val;
				this.editroomData = val;
				console.log(val)
			},

			handleClick(tab, event) {
				//console.log(tab, event);
			},
			deleteRow(index, rows) {
				//index数组的角标，rows储存数据的数组
				//验证删除数据的格式
				//console.log(rows);
				//console.log(index);
				//console.log(rows[index].dID);
				//形式上的删除
				rows.splice(index, 1);
			},
			save: function() {
				this.visible = true
				this.ableChange = true
			},
			editdoctor: function(index, rows) {
				this.ableChange = false;

			},
			randomString(length) {
				var str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
				var result = '';
				for (var i = length; i > 0; --i) {
					result += str[Math.floor(Math.random() * str.length)];
				}
				console.log(result)
			}

		}
	};
</script>

<style>
</style>
